<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 门店数据列表 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-date-picker class="mr10" v-model="startTime_endTime" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-select v-model="query.teamId" filterable placeholder="选择门店" class="mr10">
          <el-option label="全部门店" value="">
          </el-option>
          <el-option v-for="item in optionVal" :key="item.name" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <!-- add -->
        <el-select v-model="query.aa" filterable placeholder="选择客户来源" class="mr10">
          <el-option label="全部来源" value="">
          </el-option>
          <el-option v-for="item in sourceList" :key="item.dfFromName" :label="item.dfFromName" :value="item.dfType">
          </el-option>
        </el-select>
        <el-select v-model="query.bb" filterable placeholder="选择所属公海" class="mr10">
          <el-option label="全部公海" value="">
          </el-option>
          <el-option v-for="item in haiOptionVal" :key="item.hsName" :label="item.hsName" :value="item.hsId">
          </el-option>
        </el-select>
      </div>
      <div class="handle-box">
        <el-input v-model="query.kw" placeholder="请输入用户名/电话查询" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <el-table v-loading="loading" :data="tableData" border class="table" style="width: 100%" ref="multipleTable"
                header-cell-class-name="table-header" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="storeName" label="所属门店" width="120"></el-table-column>
        <el-table-column prop="cName" label="客户名称" width="120">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false" @click="drawerStateClick(scope.row.cId, scope.row.cIsFlag)">
              {{ scope.row.cName }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="cPhone" label="电话" width="120"></el-table-column>
        <el-table-column label="客户级别" width="120">
          <template slot-scope="scope">{{
                        scope.row.cLevel === 'A' ? 'A(重要客户)' : scope.row.cLevel === 'B' ? 'B(优质客户)' : 'C(普通客户)'
                    }}</template>
        </el-table-column>
        <el-table-column prop="newFollowUpRecord" label="最新跟进记录" width="180"></el-table-column>
        <el-table-column prop="fromName" label="客户来源" width="120"></el-table-column>
        <el-table-column prop="fromSeasName" label="所属公海" width="120"></el-table-column>
        <el-table-column prop="cCreateTime" label="创建时间" width="200"></el-table-column>
        <el-table-column prop="cNextTime" label="下次联系时间" width="200"></el-table-column>
        <el-table-column label="成交状态" align="center" fixed="right" width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.cStatus === '0'" type="primary">待跟进</el-tag>
            <el-tag v-if="scope.row.cStatus === '1'" type="success">已签约</el-tag>
            <el-tag v-if="scope.row.cStatus === '2'" type="primary">已跟进/在考虑</el-tag>
            <el-tag v-if="scope.row.cStatus === '3'" type="primary">已邀约/待上门</el-tag>
            <el-tag v-if="scope.row.cStatus === '4'" type="primary">已沟通/不需要</el-tag>
            <el-tag v-if="scope.row.cStatus === '5'" type="primary">已上门/待签约</el-tag>
            <el-tag v-if="scope.row.cStatus === '6'" type="primary">已上门/资质不符</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="totalCount"
                       :pager-count="5" @current-change="handlePageChange" @prev-click="handlePageChange" @next-click="handlePageChange">
        </el-pagination>
      </div>
    </div>

    <!-- 查看客户信息窗口 -->
    <customer-model ref="drawerState" @fathergetData="getData"></customer-model>
  </div>
</template>

<script>
import { StoreDataListTableData, StoreDataListSelect, customerFormSeleVal, customerFormSeleHaiVal } from '../../../api/index';
import customermodel from '../../common/customermodel';
export default {
  data() {
    return {
      editVisible: false,
      loading: true,
      startTime_endTime: [],
      query: {
        page: 1,
        limit: 10,
        startTime: '',
        endTime: '',
        kw: '',
        teamId: '',
      },
      sourceList: [],
      haiOptionVal: [],
      optionVal: [],
      totalCount: 0,
      totalPage: 0,

      tableData: [],
      multipleSelection: [],

      haiFlg: false,
    };
  },
  components: {
    'customer-model': customermodel
  },
  created() {
    this.getData();
    this.selectGet();
  },
  watch: {
    $route: 'getData'
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      this.loading = true;
      StoreDataListTableData(this.query).then((res) => {
        this.loading = false;
        if (res.code === 0) {
          this.tableData = res.recordList;
          this.totalCount = res.totalCount;
          this.totalPage = res.totalPage;
        } else {
          this.$message(res.msg);
        }
      });
    },
    //查询门店下拉
    selectGet() {
      StoreDataListSelect().then((res) => {
        if (res.code === 0) {
          this.optionVal = res.storeList;
        } else {
          this.$message(res.msg);
        }
      })
      customerFormSeleVal().then((res) => {
        if (res.code === 0) {
          this.sourceList = res.fromList;
        } else {
          this.$message(res.msg);
        }
      });
      customerFormSeleHaiVal().then((res) => {
        if (res.code === 0) {
          this.haiOptionVal = res.teamSeasList;
        } else {
          this.$message(res.msg);
        }
      });
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
    // 分页切换
    handlePageChange(val) {
      this.loading = true;
      this.$set(this.query, 'page', val);
      this.getData();
    },
    //搜索
    handleSearch() {
      this.query.page = 1;
      if (this.startTime_endTime) {
        this.query.startTime = this.startTime_endTime[0] ? this.startTime_endTime[0] : '';
        this.query.endTime = this.startTime_endTime[1] ? this.startTime_endTime[1] : '';
      } else {
        this.query.startTime = '';
        this.query.endTime = '';
      }
      this.getData();
    },
    //点击查看客户信息
    drawerStateClick(id, flag) {
      this.$refs.drawerState.drawerStateClick(id, flag);
    },
    // 多选操作
    handleSelectionChange(val) {
      let arr = [];
      val.forEach((item, i) => {
        arr.push(item.cId);
      });
      this.multipleSelection = arr;
    },
  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 500px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.IconColor {
    color: #e6a23c;
}
/deep/ :focus {
    outline: 0;
}
.el-drawer__title {
    color: #72767b;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 25px;
    padding: 20px 35px 0;
}
.el-drawer__title span {
    font-size: 14px;
    color: #66b1ff;
    margin: 20px;
    cursor: pointer;
}
.el-radio {
    margin-right: 0px;
}
.beizhu_text {
    height: 794px;
    overflow: auto;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-left: 35px;
    padding: 20px;
    box-sizing: border-box;
    color: #72767b;
    font-size: 14px;
}
.beizhu_text > div:first-child {
    padding-top: 0;
}
.beizhu_text > div {
    padding: 5px 0;
}
.el-icon-star-on {
    font-size: 20px;
}
</style>
